<template>
	<div class="drawer_boxs">
		<div class="save_clcik">
			<el-button title="新增" class="filter-item" style="margin: 10px" type="primary" :icon="Plus"
				@click="save_clcik">
			</el-button>
		</div>

		<div class="box_wcl isTable">
			<el-table :data="ycqkList" fit highlight-current-row stripe style="width: 100%" border>
				<el-table-column prop="startDate" label="时间" align="center">
					<template #default="scope">
						<div>
							{{
                scope.row.createDate.split("T")[0] +
                " " +
                scope.row.createDate.split("T")[1].split(":")[0] +
                ":" +
                scope.row.createDate.split("T")[1].split(":")[1]
              }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="zcfr" label="上报人" align="center">
					<template #default="scope">
						{{ scope.row.reportUserName }}
					</template>
				</el-table-column>

				<el-table-column prop="zcfr" label="类型" align="center">
					<template #default="scope">
						{{ scope.row.exceptType }}
					</template>
				</el-table-column>

				<el-table-column prop="ld" label="状态" align="center">
					<template #default="scope">
						<div style="color: greenyellow" v-if="scope.row.state">已处理</div>
						<div style="color: red" v-else>未处理</div>
					</template>
				</el-table-column>
				<el-table-column width="180" prop="ld" label="情况描述" align="center">
					<template #default="scope">
						{{ scope.row.content }}
					</template>
				</el-table-column>
				<el-table-column width="260" prop="ld" label="编辑" align="center">
					<template #default="scope">
						<el-button size="small" type="primary" title="" :disabled="scope.row.state"
							@click.stop="handleEditSave(scope.$index, scope.row)">编辑
						</el-button>
						<el-button size="small" type="warning" title="" :disabled="scope.row.state"
							@click.stop="handleEdit(scope.$index, scope.row)">处理
						</el-button>
						<el-popconfirm title="确认删除嘛" @confirm.stop="handleDelete(scope.row)">
							<template #reference>
								<el-button size="small" type="danger"> 删除 </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="dialog-footer" v-if="activeName == 'sb'">
			<el-button type="primary" @click="ycsbSave"> 保存 </el-button>
		</div>
	</div>

	<div>
		<el-dialog v-model="isDialog" width="1040" title="处理">
			<div style="padding: 0 20px; color: white;    transform: translateY(40px);">
				<div style="display: flex; justify-content: space-between">
					<div style="display: flex; margin-bottom: 10px">
						<div style="width: 67px; line-height: 47px" class="flex_center_center">
							类型:
						</div>
						<div v-if="!stateYc" style=" line-height: 47px">{{ ycqkObj.exceptType }}</div>
						<el-select v-else :disabled="!stateYc" v-model="ycqkObj.exceptType" size="large"
							style="width: 260px" placeholder=" ">
							<el-option v-for="item in optionsType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div style="display: flex; margin-bottom: 10px">
						<div style="width: 67px" class="flex_center_center">上报人:</div>
						<div style="line-height: 48px">
							{{ userInfo.name }}
						</div>
					</div>
				</div>
				<div style="display: flex; margin-bottom: 10px">
					<div style="min-width: 70px" class="flex_center_center">情况:</div>
					<div v-if="!stateYc" style="height: 136px; display: flex; align-items: center">
						{{ ycqkObj.content }}
					</div>
					<el-input v-else :disabled="!stateYc" v-model="ycqkObj.content" :rows="6" type="textarea"
						placeholder="情况说明" />
				</div>

				<div v-if="!stateYc">
					<el-divider content-position="left"> 处理 </el-divider>
					<div style="display: flex; margin-bottom: 10px">
						<div style="width: 78px" class="flex_center_center">处理:</div>
						<el-input v-model="ycqkObj.handleContent" :rows="6" type="textarea" placeholder="处理结果" />
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="ycsbSave"> 保存 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>

	<div>
		<el-dialog v-model="saveIS" width="1040" title="编辑">
			<div style="padding: 0 20px; color: white;    transform: translateY(40px);">
				<div style="display: flex; justify-content: space-between">
					<div style="display: flex; margin-bottom: 10px">
						<div style="width: 67px; line-height: 47px" class="flex_center_center">
							类型:
						</div>
						<div v-if="!stateYc" style="line-height: 47px">
							{{ ycqkObj.exceptType }}
						</div>
						<el-select v-else :disabled="!stateYc" v-model="ycqkObj.exceptType" size="large"
							style="width: 260px" placeholder=" ">
							<el-option v-for="item in optionsType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div style="display: flex; margin-bottom: 10px">
						<div style="width: 67px" class="flex_center_center">上报人:</div>
						<div style="line-height: 48px">
							{{ userInfo.name }}
						</div>
					</div>
				</div>
				<div style="display: flex; margin-bottom: 10px">
					<div style="min-width: 70px" class="flex_center_center">情况:</div>

					<el-input v-model="ycqkObj.content" :rows="6" type="textarea" placeholder="情况说明" />
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="ycsbSave"> 保存 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElMessage
	} from "element-plus";
	import http from "@/utils/api";
	import {
		Search,
		Share,
		Upload,
		TakeawayBox,
		Refresh,
		Collection,
		Plus,
		Loading,
		FolderDelete,
		Back,
	} from "@element-plus/icons-vue";
	import {
		ref,
		watch,
		onMounted,
		onBeforeUnmount,
		reactive,
		onBeforeMount,
		nextTick,
		onUnmounted,
	} from "vue";
	import {
		defineProps,
		defineEmits
	} from "vue";
	let activeName = ref("wcl");
	const props = defineProps({
		orgIds: {
			type: Object,
			default: {},
		},
	});

	let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
	let daydata = ref("");
	let ycqkObj = ref({});
	// 异常状态
	let stateYc = ref(true);

	let saveText = ref('xz')
	const optionsType = [{
			value: "社情信息",
			label: "社情信息",
		},
		{
			value: "气象信息",
			label: "气象信息",
		},
		{
			value: "低质信息",
			label: "低质信息",
		},
		{
			value: "交通信息",
			label: "交通信息",
		},
		{
			value: "执法信息",
			label: "执法信息",
		},
	];

	watch(
		() => props.isJudge,
		(newValue, oldValue) => {
			console.log("isJudge changed from", oldValue, "to", newValue);
			ycqkObj.value.reportUser = userInfo.account;
			activeName.value = "wcl";
			stateYc.value = true;
		}, {
			deep: true, // 深度监听
			immediate: true, // 立即触发回调
		}
	);

	const emit = defineEmits(["childEvent"]);
	let dateSfm = ref("");
	let hour = ref("");

	const ycTableClick = (row) => {
		ycqkObj.value = row;
		activeName.value = "sb";
		stateYc.value = false;
	};

	// 获取年月日 时
	const getFormattedDateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, "0");
		const day = String(now.getDate()).padStart(2, "0");
		const hours = String(now.getHours()).padStart(2, "0");
		const minutes = String(now.getMinutes()).padStart(2, "0");
		const seconds = String(now.getSeconds()).padStart(2, "0");
		dateSfm.value = `${hours}:${minutes}:${seconds}`;
		hour.value = String(now.getHours()).padStart(2, "0");
		daydata.value = `${year}-${month}-${day}`;

		return `${year}-${month}-${day} ${hour.value}`;
	};
	let isIndex = ref("0");
	const handleClickTab = (tab) => {
		isIndex.value = tab.index;
		getExceptionReportSelect(tab.index);
	};
	let ycqkList = ref([]);
	let yclArr = ref([]);
	const getExceptionReportSelect = async () => {
		let obj = {
			page: 1,
			limit: 299,
			orgId: props.orgIds,
			exceptType: "",
			startDate: "",
			endDate: "",
			state: "0,1",
			// state: isIndex.value,
			reportType: "jg",
			reportState: "1",
		};
		let res = await http.znjw.ExceptionReportSelect(obj);
		if (!res) return;
		if (res.code == 0) {
			ycqkList.value = res.data.data;
		}
	};
	let isState = ref(0)
	//异常上报提交
	const ycsbSave = async () => {
		let obj = {
			orgId: props.orgIds,
			state: 0,
			reportType: "jg",
			// file: "",
		};
		console.log(ycqkObj.value, '[[[[]]]]');

		if (!ycqkObj.value.content || !ycqkObj.value.exceptType) {
			ElMessage({
				type: "error",
				message: "请完善异常信息",
			});
			return;
		}

		let res;
		if (saveText.value == 'bj' || saveText.value == 'cl') {
			(obj["content"] = ycqkObj.value.content || ""),
			(obj["handleContent"] = ycqkObj.value.handleContent || ""),
			(obj["handleDate"] = new Date().toLocaleString().replace(/\//g, "-")),
			(obj["handleUser"] = userInfo.account || ""),
			//   (obj["handleUser"] = ycqkObj.value.handleUser || ""),
			(obj["state"] = isState.value),
			(obj["id"] = ycqkObj.value.id),
			(res = await http.base.ExceptionReportUpdate(obj));
		} else {
			(obj["content"] = ycqkObj.value.content || ""),
			(obj["reportUser"] = userInfo.account || ""),
			(obj["exceptType"] = ycqkObj.value.exceptType || ""),
			(obj["reportType"] = "jg"),
			(obj["reportState"] = "1"),
			(obj["state"] = 0),
			(obj["reportDate"] =
				ycqkObj.value.reportDate ||
				new Date().toLocaleString().replace(/\//g, "-")),
			(res = await http.base.ExceptionReportAdd(obj));
		}
		if (res.code == 0) {
			ElMessage({
				message: "上传成功",
				type: "success",
				plain: true,
			});
			ycqkObj.value = {};
			saveIS.value = false;
			isDialog.value = false;
			getExceptionReportSelect();
		}
	};

	const handleDelete = async (row) => {

		let res = await http.znjw.ExceptionReportDel({
			id: row.id,
		});
		if (res && res.code == 0) {
			ElMessage({
				message: "删除成功",
				type: "success",
				plain: true,
			});
			getExceptionReportSelect();
		}
	};

	let isDialog = ref(false);
	const save_clcik = () => {
		ycqkObj.value.exceptType = '社情信息'
		saveText.value = 'xz'
		stateYc.value = true;
		isDialog.value = true;
	};
	const handleEdit = (index, row) => {
		let obj = row;
		isDialog.value = true;
		saveText.value = 'cl'
		stateYc.value = false;
		isState.value = 1;
		ycqkObj.value = Object.assign(obj, {});
		console.log(ycqkObj.value, "llll6666");

		// ycqkObj.value = row;
	};
	let saveIS = ref(false);
	const handleEditSave = (index, row) => {
		let obj = row;
		ycqkObj.value = Object.assign(obj, {});
		stateYc.value = false;
		saveIS.value = true;
		saveText.value = 'bj'
		isState.value = row.state;
		console.log(ycqkObj.value, "llll6666");
	};
	watch(
		() => props.orgIds,
		(newValue, oldValue) => {
			if (newValue) {
				getFormattedDateTime();
				getExceptionReportSelect();
			} else {}
		}, {
			deep: true, // 深度监听
			immediate: true, // 立即触发回调
		}
	);
</script>

<style scoped lang="scss">
	::v-deep .el-select__placeholder {
		color: white;
	}

	::v-deep .el-select--large .el-select__wrapper {
		background: #ffffff0d;
		box-shadow: none;
		color: white;
	}

	::v-deep .el-tag.el-tag--info {
		background: #ff000000;
		color: white;
	}

	::v-deep .el-input.is-disabled .el-input__wrapper {
		background: #ffffff0d;
		box-shadow: none;
	}

	::v-deep .el-input__wrapper {
		background: #ffffff0d;
		box-shadow: none;
		color: white;
	}

	::v-deep .el-input__inner {
		color: white;
	}

	::v-deep .el-textarea__inner {
		background: #ffffff0d;
		box-shadow: none;
		color: white;
	}

	::v-deep .el-radio.el-radio--large .el-radio__label {
		color: white;
	}

	::v-deep .el-form-item__label {
		color: white !important;
	}

	::v-deep .isTable .el-table {
		background-color: rgb(8, 32, 78) !important;

		.el-table tr {
			background-color: rgb(8, 32, 78) !important;
		}

		.cell {
			height: 36px !important;
			color: #fff;
			text-align: center;
			// border: 1px solid #ccc;
			background: rgb(8, 32, 78) !important;
			font-size: 12px;
			line-height: 36px;
		}

		.el-table__cell {
			border-color: 1px solid rgb(5, 112, 146);
			padding: 2px 0px !important;
			background: rgb(8, 32, 78) !important;
		}

		.el-table--fit .el-table__inner-wrapper:before {
			display: none !important;
		}

		.el-table th.el-table__cell.is-leaf {
			border: none !important;
		}

		--el-table-border-color: rgb(5, 112, 146);
	}

	::v-deep .isTable .el-table {
		.cell {
			height: 30px;
			text-align: center;
			// border: 1px solid #ccc;
			font-size: 12px;
			line-height: 38px;
		}
	}

	.drawer_boxs {
		width: 100%;
		height: 100%;
	}

	/**
弹窗样式修改
 */

	::v-deep .el-dialog {
		background-color: rgb(8, 32, 78) !important;
		padding: 0 0px;
		height: 585px;

		.el-dialog__header {
			// display: none;
			padding: 0px !important;
			height: 32px;
			line-height: 32px;
			color: white;
			margin-bottom: 4px;
			border-bottom: 1px solid rgb(5, 112, 146);

			.el-dialog__title {
				color: white;
				transform: translateX(12px);
				display: inline-block;
				font-size: 16px;
			}
		}

		.el-dialog__footer {
			padding: 0 10px;
			transform: translateY(70px);


		}

		.el-dialog__headerbtn {
			width: auto;
			height: auto;
			right: 24px;
			top: 4px;
		}
	}
</style>